import React from "react";
import { WeaLocaleProvider } from "ecCom";
import classNames from 'classnames';
import fillin from '../../../../../apis/fillin';

const { getLabel } = WeaLocaleProvider;

export default class ImageCode extends React.Component { 
    state = {
        isShowCover: false,
        captchaStatus:0,
        response:{
            images:[],
            values: [],
            name: '',
            captcha:''
        }
    };

    componentDidMount() {
        const { uuid } = this.props;

        fillin.getImageCaptch({uuid})
        .then(response => {
            response && this.setState({response})
        })
    }

    onImageClick = index => {
        const { values, captcha } = this.state.response;
        const { onImageCom, uuid } = this.props;
        const value = values[index];

        this.setState({captchaStatus: 0, isShowCover: true});

        fillin.checkImageCaptch({captcha,uuid,value})   
        .then(response => {
            if(!response) return;

            const code = response.code;

            switch(code) {
                case 0 :
                    this.setState({captchaStatus: 1});
                    onImageCom({
                        isImageCom: true,
                        captcha,
                        value,
                    });

                    break;
                case -1:
                    this.setState({captchaStatus: 2});
                    fillin.getImageCaptch({uuid}).then(response => { 
                        setTimeout( () => {
                            this.setState({captchaStatus: 1, isShowCover: false, response})
                        },1000)
                    });

                    break;
                case -2:
                    this.setState({captchaStatus: 3});
                    fillin.getImageCaptch({uuid}).then(response => { 
                        setTimeout(() => {
                            this.setState({isShowCover: false, response})
                        },1000)
                    });

                    break;
            }
        })
        .catch(response => {
        })
    }

    onRefresh = () => {
        const { uuid } = this.props;

        fillin.getImageCaptch({uuid})
        .then(response => {
            response && this.setState({response})
        })
    }

    renderCaptchaMsg() {
        const { captchaStatus } = this.state;

        switch(captchaStatus){
            case 0: 
                return (
                    <div>{getLabel('511309', '验证中...')}</div>
                );
            case 1:
                return (
                    <div>{getLabel('511310', '验证成功')}</div>
                );
            case 2:
                return (
                    <div>{getLabel('511311', '验证失败,重新选择一次')}</div>
                );
            case 3:
                return (
                    <div>{getLabel('511312', '验证码过期')}</div>
                )
        }
    }

    render(){
        const { response:{ images, name}, isShowCover, captchaStatus } = this.state;
        const maskClsName = classNames('captcha-cover', {
            'wea-hide': !isShowCover
          });
        const captchaAreaCls = classNames('visualCaptcha-action-area', {
            'success': captchaStatus == 1,
            'error': captchaStatus == 2
            });
        const imageEles = images.map((image, index) => (
            <div className='image' onClick={this.onImageClick.bind(this,index)} >
                <img  src={`data:img/jpg;base64,${image}`} />
            </div>
        ))

        return (
            <div className='image-captcha'>
                <label className='visualCaptcha-explanation'>{getLabel('511313', '请选择以下图标中的')}&nbsp;<span>{name}</span></label>
                <div className={captchaAreaCls}>
                    <div className={maskClsName}>{this.renderCaptchaMsg()}</div>
                    <div className='main'>{imageEles}</div>
                    <div className='refresh'>
                    <img title={getLabel('511324', '刷新：获取新的图标')} onClick={this.onRefresh} alt={getLabel('511325', '刷新图标')} src='' />
                </div>
                </div>
            </div>
            
        )
    }

}
